<template>
	<view>
		<view>
			<!-- 章回标题 -->
			<view class="chapter-title">
				<view class="hz">{{details.title}}</view>
			</view>
			<!-- 章回内容 -->
			<view class="chapter-content" v-if="details.pinyin">
				<block v-for="(paragraph,index) in details.paragraph" :key="index">
					<!-- 段落 -->
					<view class="paragraph">
						<view class="indent">
						</view>
						<block v-for="(sentence,index2) in paragraph.sentence" :key="index2">
							<!-- 句子 -->
							<block v-for="(item,index3) in sentence.word" :key="index3">
								<view class="word">
									<view class="py" v-if="pinyin">{{item.pinyin}}</view>
									<view class="hz">{{item.word}}</view>
								</view>
							</block>
							<!-- 标点 -->
							<view class="symbol">
								{{sentence.symbol}}
							</view>
						</block>
					</view>
				</block>
			</view>
			<view class="chapter-content" v-else>
				<view class="original" v-for="(item,index) in details.paragraph" :key="index">
					{{item.content}}
				</view>
			</view>
			<!-- 译文 -->
			<view class="chapter-trans" v-if="target">
				<text class="title">译文:</text>
				<text>『 {{details.target}}』</text>
			</view>

		</view>
		<view class="placeholder"></view>
		<!-- 底部功能条 -->
		<view class="bar" v-show="flag">
			<view :class="['action',chapterCount>1 ?'':'unable']" @click="showChapters">
				<text class="iconfont icon-zhanghui"></text>
				<text class="txt">章回</text>
			</view>
			<view :class="['action',details.pinyin?'':'unable']" @click="showPinyin">
				<text class="iconfont icon-pinyin"></text>
				<text class="txt">注音</text>
			</view>
			<view :class="['action',details.target?'':'unable']" @click="showTarget">
				<text :class="['iconfont',target?'icon-yuanwen':'icon-yiwen']"></text>
				<text class="txt">释义</text>
			</view>
			<view class="action">
				<text class="iconfont icon-fenxiang"></text>
				<text class="txt">分享</text>
			</view>
			<view class="action" @click="backToTop">
				<text class="iconfont icon-dingbu"></text>
				<text class="txt">顶部</text>
			</view>
		</view>

		<pop ref="chapterlist" :width="68" height="100vh" :maskFun="true" direction="left" :is_close="true"
			:is_mask="true">
			<scroll-view class="chapter-list" scroll-y="true" @scrolltolower="loadChapters()">
				<view class="item" v-for="(item,index) in chapterItems" :key="index">
					<text :class="chapterId===item.id?'active':''" @click="showChapter(item.id)">{{item.title}}</text>
				</view>
			</scroll-view>
		</pop>
	</view>
</template>

<script>
	var timer; //定时器状态
	import apiSutra from '@/common/api/sutra.js'
	export default {
		data() {
			return {
				flag: true,
				pinyin: true,
				target: false,
				sutraId: null,
				chapterId: null,
				pageNum: 1,
				chapterCount: 0,
				chapterItems: [],
				details: null,
				nomore: false,
			};
		},
		onLoad(option) {
			this.sutraId = option.id
			this.loadChapters()
		},
		// 滚动监听事件
		onPageScroll(object) {
			// 只要滚动就清除状态
			clearTimeout(timer)
			// 告知标识 -> 开始滚动
			this.flag = false
			// 检测是否停留了 N 秒
			// 如果停留则表示滚动结束
			// N: 500(定时器时间 毫秒) -> 0.5秒算停止滚动
			// 滚动后多长时间算停止滚动
			timer = setTimeout(() => {
				// 告知标识 -> 结束滚动
				this.flag = true;
			}, 300);
		},
		methods: {
			// 返回顶部
			backToTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				})
			},
			// 打开章回弹窗
			showChapters() {
				this.$refs.chapterlist.show()
			},
			// 注音
			showPinyin() {
				this.pinyin = !this.pinyin
			},
			// 切换译文原文
			showTarget() {
				this.target = !this.target
			},
			showChapter(id) {
				this.chapterId = id
				this.loadChapterDetails(id)
				this.$refs.chapterlist.close()
				this.backToTop()
			},
			// 章回列表
			loadChapters() {
				if (this.nomore) {
					return
				}
				apiSutra.chapters({
					id: this.sutraId,
					page: this.pageNum,
				}).then(res => {
					// 递增下一页
					if (res.size > 0) {
						this.chapterItems = [...this.chapterItems, ...res.list]
						this.chapterCount = this.chapterItems.length
						// 加载第一章
						if (this.pageNum === 1) {
							this.chapterId = this.chapterItems[0].id
							this.loadChapterDetails(this.chapterId)
						}

						this.pageNum++
					} else {
						this.nomore = true
					}
				}).catch(err => {

				})
			},
			// 章回详情
			loadChapterDetails(id) {
				apiSutra.chapterDetails({
					id: id,
				}).then(res => {
					this.details = res
				}).catch(err => {

				})
			}
		}
	}
</script>

<style lang="scss">
	.chapter {
		&-list {
			width: 100%;
			height: 100vh;
			background: rgba(251, 244, 234, 0.9);
			padding: 88rpx 25rpx;

			.item {
				padding: 42rpx 48rpx 0 48rpx;
				font-size: 30rpx;
				text-align: left;
				color: #493129;

				.active {
					font-size: 33rpx;
					font-weight: bold;
				}
			}
		}
	}

	.chapter {
		&-title {
			display: flex;
			justify-content: center;
			text-align: center;
			padding-top: 58rpx;
			padding-bottom: 33rpx;
			font-size: 44rpx;
		}
	}


	.chapter {
		&-content {
			padding: 10rpx 18rpx;

			.paragraph {
				margin: 18rpx 0rpx;
				display: flex;
				flex-wrap: wrap;

				.indent {
					width: 100rpx;
				}

				.symbol {
					align-self: flex-end;
				}

				.word {
					margin: 3rpx 7rpx;
					text-align: center;

					.py {
						color: #493129;
						opacity: 0.5;
						font-size: 24rpx;
						font-weight: bold;
					}

					.hz {
						font-size: 44rpx;
						color: #493129;
					}
				}
			}

			.original {
				text-indent: 100rpx;
				margin: 18rpx 0rpx;
				font-size: 44rpx;
				color: #493129;
			}

			.orignail {
				white-space: pre-wrap;
				font-size: 48rpx;
				line-height: 75rpx;
				color: #493129;
				text-indent: 2rem;
			}
		}

	}

	.chapter-trans {
		font-size: 33rpx;
		padding: 18rpx;
		letter-spacing: 8rpx;
		color: #666666;

		.title {
			font-size: 33rpx;
			padding: 18rpx;
			font-weight: bold;
			color: #333333;
		}
	}

	.placeholder {
		height: 158rpx;
		width: 100%;
	}

	.bar {
		width: 100%;
		height: 128rpx;
		background: #FBF4EA;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.unable {
			opacity: 0.3 !important;
		}

		.action {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: #493129;

			.iconfont {
				font-size: 42rpx;
			}

			.txt {
				margin-top: 9rpx;
			}
		}
	}
</style>
